<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="article-container">
        <div v-for="item in ArticleData" :key="item.article_id" class="item">
            <span>标题：{{ item.title }}  &nbsp;&nbsp; 作者：{{ item.author }}</span>
            <!-- <div>标题：{{ item.title }}</div>
            <div>作者：{{ item.author }}</div> -->
            <div>内容：{{ item.content }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getArticleAPI} from "@/api/community"
import { ref, onMounted} from "vue"


const route = useRoute();
const topicId = Number(route.params.id);
// console.log("当前专题的id", topicId);

// 存储文章信息
const ArticleData=ref([])
const getArticle=async()=>{
    const res=await getArticleAPI(topicId)
     ArticleData.value=res.data.items
    //  console.log(ArticleData.value)
}

const containerRef = ref<HTMLElement | null>(null);
const initialMinHeight = ref(0);
const initialMarginTop = ref(0);
// 初始化尺寸观察
const initResizeObserver = () => {
  if (!containerRef.value) return;
  
  // 存储初始值
  const computedStyle = window.getComputedStyle(containerRef.value);
  initialMinHeight.value = parseFloat(computedStyle.minHeight);
  initialMarginTop.value = parseFloat(computedStyle.marginTop);
  
  // 创建ResizeObserver实例
  const resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      const target = entry.target as HTMLElement;
      const currentMinHeight = parseFloat(window.getComputedStyle(target).minHeight);
      
      // 计算增加的高度
      const heightIncrease = currentMinHeight - initialMinHeight.value;
      
      // 如果高度增加，同步增加margin-top
      if (heightIncrease > 0) {
        target.style.marginTop = `${initialMarginTop.value + heightIncrease}px`;
      }
    }
  });
  
  // 开始观察容器
  resizeObserver.observe(containerRef.value);
  
  // 组件卸载时断开观察
  return () => {
    resizeObserver.disconnect();
  };
};

onMounted(() => {
  getArticle();
  initResizeObserver();
});
</script>

<style scoped>
.article-container{
    max-width: 1200px;
    width: 1200px;
    min-height: 750px;
    margin: 0 auto;
    margin-top: 100px;
    padding: 15px;
    
}
.item{
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(204, 204, 204, 0.2);
}

</style>